<template>
	<view>
		<view class="container">
			<view class="stall" v-for="(item,index) in stall" :key='index' @click="select(item)">
				<image src="../../static/image/chewei_active.png" mode="" v-if="item.status == 1"></image>
				<image src="../../static/image/chewei.png" mode="" v-if="item.status==0"></image>
			</view>
		</view>
		<view class="tips">
			<view class="icon">
				<view class="gray">
				</view>
				<text>在售</text>
			</view>
			<view class="icon ">
				<view class="blue">
				</view>
				<text>已售</text>
			</view>
		</view>
		<view class="footer">
			<view class="info" v-if='selection'>
				<view class="stallInfo">
					<view class="stall">
						{{selection}}
					</view>
					<view class="text">
						车位类型: 标准车位
					</view>
				</view>
				<view class="minus" @click="minus">
					<image src="../../static/image/minus.png" mode=""></image>
				</view>
			</view>
			<u-button type="primary" class="button" @click="addVip">
				申请专属车位
			</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {

				// 所有车位
				stall: [],
				// 已经预定的车位
				stallActive: [],
				// 未预定的车位
				stallNotActive: [],
				// 选择预定的车位
				selection: '',
			}
		},
		methods: {
			// 获取车位信息
			getStall() {
				this.$u.api.initialPark().then(res => {
					this.stall = res.data
					this.stall.forEach(value => {
						if (value.status == 1) {
							this.stallActive.splice(0, 0, value.park_num)
						} else {
							this.stallNotActive.splice(0, 0, value.park_num)
						}
					})
				})
			},
			// 选择车位
			select(item) {
				if (this.start_time == '' || this.end_time == '') {
					this.selection = "请先选择时间"
					return
				}
				// 将所有未预定和未被选中的车位设为未激活状态
				for (let i = 0; i < this.stall.length; i++) {
					if (this.stallActive.indexOf(this.stall[i].park_num) == -1 && this.stall[i].park_num !== item
						.park_num) {
						this.stall[i].status = 0
					}
				}
				// 选择已经被预定的车位
				if (this.stallActive.indexOf(item.park_num) !== -1) {
					this.selection = "该车位已被预定"
					// return
				}
				// 再次点击相同车位
				else if (this.selection == item.park_num) {
					this.selection = ''
					// item.active = !item.active
					if (item.status == 1) {
						item.status = 0
					} else {
						item.status = 1
					}
					// return
				}
				// 激活被选择的车位
				else {
					if (item.status == 1) {
						item.status = 0
					} else {
						item.status = 1
					}
					this.selection = item.park_num
				}
			},
			// 取消车位
			minus() {
				this.selection = ''
				for (let i = 0; i < this.stall.length; i++) {
					if (this.stallActive.indexOf(this.stall[i].park_num) == -1) {
						this.stall[i].status = 0
					}
				}
			},

			addVip() {
				this.$u.api.addStallVip({
					park_num: this.selection,
					money: 1000
				}).then(res => {
					this.$refs.uToast.show({
						title: `${res.meta.message}`,
						type: 'success',
						url: '/pages/stall/stallVip'
					})
				})
			},
		},
		computed: {
			settime: function() {

			}
		},
		onLoad() {
			this.getStall()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $page-color;
	}

	.container {
		display: flex;
		flex-flow: wrap;
		justify-content: center;
		align-items: flex-start;
		width: 100%;
		// height: 800rpx;
		overflow-y: scroll;
		max-height: 800rpx;
		background-color: #FFFFFF;

		.stall {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 158rpx;
			height: 180rpx;
			// border: $base-color solid 2rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			margin: 15rpx 15rpx;

			image {
				width: 128rpx;
				height: 150rpx;
			}
		}
	}

	.tips {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		// margin-top: 60rpx;

		.icon {
			display: flex;
			align-items: center;
		}

		.gray {
			height: 30rpx;
			width: 30rpx;
			background-color: #cdcdcd
		}

		.blue {
			height: 30rpx;
			width: 30rpx;
			background-color: $base-color;
		}
	}

	.footer {
		height: 330rpx;
		margin-top: 30rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-evenly;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 5%;

		.info {
			display: flex;
			align-items: center;

			.stallInfo {
				margin-left: 30rpx;

				.stall {
					font-size: 40rpx;
					font-weight: bold;
				}

				.text {
					color: #999999;
					margin-top: 5rpx;
				}

			}

			.minus {
				margin: 0 30rpx 0 auto;

				image {
					height: 40rpx;
					width: 40rpx;
				}
			}
		}

		.button {
			width: 100%;
			height: 100rpx;
			border-radius: 30rpx;
		}
	}
</style>
